<template>
  <div class="task">
<!--    {{ props.taskSize }}/{{ nowIndex }}-->
    <div class="task-pre " :class="{ active: taskSize >= 1  && nowIndex > -1}" @click="bindPre">
      <i class="animation-scale-down iconfont icon-shangyibu"></i>
    </div>
    <div class="task-next" :class="{ active: nowIndex < taskSize-1 && taskSize != 0 }" @click="bindNext">
      <i class="animation-scale-down iconfont icon-shangyibu"></i>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
const props = defineProps<{
  taskSize: number;
  taskHistoryIndex: number;
}>();

const nowIndex = computed(() => props.taskHistoryIndex);
const emit = defineEmits(['changeTask']);
const bindPre = () => {
  if (nowIndex.value <= -1) {
    return;
  }
  // nowIndex.value = nowIndex.value--;
  emit('changeTask', nowIndex.value - 1);
};
const bindNext = () => {
  if (nowIndex.value >= props.taskSize-1) {
    return;
  }
  // nowIndex.value = nowIndex.value--;
  emit('changeTask', nowIndex.value + 1);
};
</script>
<style scoped lang="scss">
.task {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16rpx;
  left: 24rpx;
  bottom: 36rpx;
  z-index: 10;
  .task-pre {
    padding: 15rpx 0;
    .iconfont {
      color: #808080;

    }
    &.active {
      .iconfont {
        color: #222222;
      }
    }
  }
  .task-next {
    transform: scaleX(-1);
    padding: 15rpx 0;
    .iconfont {
      color: #808080;
    }
    &.active {
      .iconfont {
        color: #222222;
      }
    }
  }
}
</style>
